function thatDae(str) {
  let reslut = dayjs(str, "MMDD").valueOf();
  let thatdate = dayjs(reslut).format("MM-DD");
  return thatdate;
}
function thatDaeM(str) {
  let reslut = dayjs(str, "YYYYMM").valueOf();
  let thatdate = dayjs(reslut).format("MM");
  return thatdate;
}
function indexSecondRefresh() {
  indexSecond(function () {});
}
setInterval(indexSecondRefresh, 5000);
function indexSecond(fn) {
  // 平均票价
  $.ajax({
    type: "get",
    async: true, //异步执行
    url: base_url + "/avgPrice",
    dataType: "json", //返回数据形式为json
    success: function (data) {
      if (data.code == 1000) {
        if (data.data !== null) {
          fareData = data.data.datas;
          if (Object.keys(data.data).length !== 0) {
            $(".fare_average").text(data.data.avg.toFixed(2));
            if (fareData.length !== 0) {
              fareChart();
            } else {
              $("#fare_chart").html("<div class='noData'>今日暂无数据</div>");
            }
          } else {
            $("#fare_chart").html("<div class='noData'>今日暂无数据</div>");
          }
        } else {
          $("#fare_chart").html("<div class='noData'>今日暂无数据</div>");
        }
      } else {
        alert(data.message);
      }
      fn();
    },
    error: function (errorMsg) {
      console.log("请求数据失败");
    },
  });
  // 全员生产率;
  $.ajax({
    type: "get",
    async: true, //异步执行
    url: base_url + "/product",
    dataType: "json", //返回数据形式为json
    success: function (data) {
      if (data.code == 1000) {
        if (data.data !== null) {
          productData = data.data.datas;
          if (Object.keys(data.data).length !== 0) {
            $(".productivity_average").text(data.data.avg.toFixed(2) + "%");
            if (productData.length !== 0) {
              stmtDay = productData.map((v) => thatDae(v.stmtDay));
              percent = productData.map((v) => v.percent);
              productivityChart();
            } else {
              $("#productivity_chart").html(
                "<div class='noData'>今日暂无数据</div>"
              );
            }
          } else {
            $("#productivity_chart").html(
              "<div class='noData'>今日暂无数据</div>"
            );
          }
        } else {
          $("#productivity_chart").html(
            "<div class='noData'>今日暂无数据</div>"
          );
        }
      } else {
        alert(data.message);
      }
      fn();
    },
    error: function (errorMsg) {
      console.log("请求数据失败");
    },
  });
  //施工规范率
  $.ajax({
    type: "get",
    async: true, //异步执行
    url: base_url + "/stdRate",
    dataType: "json", //返回数据形式为json
    success: function (data) {
      if (data.code == 1000) {
        if (data.data !== null) {
          stdRateData = data.data;
          if (Object.keys(stdRateData).length !== 0) {
            $(".constructionStandard_average").text(
              (stdRateData.max * 100).toFixed(2) + "%"
            );
            constructionStandardChart();
          } else {
            $("#constructionStandardChart").html(
              "<div class='noData'>今日暂无数据</div>"
            );
          }
        } else {
          $("#constructionStandardChart").html(
            "<div class='noData'>今日暂无数据</div>"
          );
        }
      } else {
        alert(data.message);
      }
      fn();
    },
    error: function (errorMsg) {
      console.log("请求数据失败");
    },
  });
  // 高峰小时最小发车间隔
  $.ajax({
    type: "get",
    async: true, //异步执行
    url: base_url + "/minDptrIntvl",
    dataType: "json", //返回数据形式为json
    success: function (data) {
      if (data.code == 1000) {
        if (data.data !== null) {
          DptrIntvlData = data.data.datas;
          if (Object.keys(data.data).length !== 0) {
            $(".departureInterval_average").text(data.data.max);
            if (DptrIntvlData.length !== 0) {
              lnNm = DptrIntvlData.map((v) => v.lnNm);
              lnHrMinDptrIntvl = DptrIntvlData.map((v) => v.lnHrMinDptrIntvl);
              departureIntervalChart();
            } else {
              $("#departureInterval_chart").html(
                "<div class='noData'>今日暂无数据</div>"
              );
            }
          } else {
            $("#departureInterval_chart").html(
              "<div class='noData'>今日暂无数据</div>"
            );
          }
        } else {
          $("#departureInterval_chart").html(
            "<div class='noData'>今日暂无数据</div>"
          );
        }
      } else {
        alert(data.message);
      }
      fn();
    },
    error: function (errorMsg) {
      console.log("请求数据失败");
    },
  });
}
indexSecond(function () {});

//平均票价
// fareChart();
function fareChart() {
  let fareC = document.getElementsByClassName("fare_chart");
  for (var i = 0; i < fareC.length; i++) {
    let myChart = echarts.init(fareC[i]);
    // let myChart = echarts.init(document.getElementById("fare_chart"));
    xAxisData = [];
    seriesData1 = [];
    sum = 0;
    barTopColor = [
      "#02c3f1",
      "#53e568",
      "#a154e9",
      "#02c3f1",
      "#53e568",
      "#a154e9",
      "#02c3f1",
    ];
    barBottomColor = [
      "rgba(2,195,241,0.1)",
      "rgba(83, 229, 104, 0.1)",
      "rgba(161, 84, 233, 0.1)",
      "rgba(2,195,241,0.1)",
      "rgba(83, 229, 104, 0.1)",
      "rgba(161, 84, 233, 0.1)",
      "rgba(2,195,241,0.1)",
    ];
    fareData.forEach((item) => {
      xAxisData.push(thatDae(item.stmtDay));
      seriesData1.push(item.avgPrice);
      sum += item.value;
    });
    option = {
      // backgroundColor: "#061326",
      // title: {
      //   text: "多色立体圆柱",
      //   top: 20,
      //   left: "center",
      //   textStyle: {
      //     color: "#fff",
      //     fontSize: 20,
      //   },
      // },
      grid: {
        left: "5%",
        top: "5%",
        right: "5%",
        bottom: "20%",
      },
      xAxis: {
        data: xAxisData,
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          interval: 0,
          show: true,
          margin: 25,
          align: "center",
          formatter: function (params, index) {
            return "{b|" + params + "}";
          },
          textStyle: {
            fontSize: 12,
            color: "#ffffff",
            rich: {
              a: {
                fontSize: 12,
                color: "#ffffff",
              },
              b: {
                height: 10,
                fontSize: 12,
                color: "#ffffff",
              },
            },
          },
        },
        interval: 0,
      },
      yAxis: {
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
      },
      series: [
        {
          name: "柱顶部",
          type: "pictorialBar",
          symbolSize: [16, 10],
          symbolOffset: [0, -5],
          z: 12,
          itemStyle: {
            normal: {
              color: function (params) {
                return barTopColor[params.dataIndex];
              },
            },
          },
          label: {
            show: true,
            position: "top",
            fontSize: 12,
          },
          symbolPosition: "end",
          data: seriesData1,
        },
        {
          name: "柱底部",
          type: "pictorialBar",
          symbolSize: [16, 10],
          symbolOffset: [0, 5],
          z: 12,
          itemStyle: {
            normal: {
              color: function (params) {
                return barTopColor[params.dataIndex];
              },
            },
          },
          data: seriesData1,
        },
        {
          name: "第一圈",
          type: "pictorialBar",
          symbolSize: [27, 16],
          symbolOffset: [0, 11],
          z: 11,
          itemStyle: {
            normal: {
              color: "transparent",
              borderColor: "#3ACDC5",
              borderWidth: 2,
            },
          },
          data: seriesData1,
        },
        {
          name: "第二圈",
          type: "pictorialBar",
          symbolSize: [38, 22],
          symbolOffset: [0, 17],
          z: 10,
          itemStyle: {
            normal: {
              color: "transparent",
              borderColor: barTopColor[0],
              borderWidth: 2,
            },
          },
          data: seriesData1,
        },
        {
          type: "bar",
          itemStyle: {
            normal: {
              color: function (params) {
                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 1,
                    color: barTopColor[params.dataIndex],
                  },
                  {
                    offset: 0,
                    color: barBottomColor[params.dataIndex],
                  },
                ]);
              },
              opacity: 0.8,
            },
          },
          z: 16,
          silent: true,
          barWidth: 10,
          barGap: "-100%", // Make series be overlap
          data: seriesData1,
        },
      ],
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  }
}

//全员生产率
// productivityChart();
function productivityChart() {
  let productivityC = document.getElementsByClassName("productivity_chart");
  for (var i = 0; i < productivityC.length; i++) {
    let myChart = echarts.init(productivityC[i]);
    // let myChart = echarts.init(document.getElementById("productivity_chart"));
    let color = [
      "#0090FF",
      "#36CE9E",
      "#FFC005",
      "#FF515A",
      "#8B5CFF",
      "#00CA69",
    ];
    const hexToRgba = (hex, opacity) => {
      let rgbaColor = "";
      let reg = /^#[\da-f]{6}$/i;
      if (reg.test(hex)) {
        rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
          "0x" + hex.slice(3, 5)
        )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
      }
      return rgbaColor;
    };

    option = {
      color: color,
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
          label: {
            show: true,
          },
        },
      },
      grid: {
        left: "2%",
        top: "20%",
        right: "6%",
        bottom: "5%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          boundaryGap: false,
          axisLabel: {
            //formatter: '{value}月',
            textStyle: {
              color: "#fff",
              fontSize: 12,
            },
            margin: 15,
          },
          axisLine: {
            lineStyle: {
              color: "#D9D9D9",
            },
          },
          data: stmtDay,
        },
      ],

      yAxis: [
        {
          type: "value",
          // name: "单位：万元",
          axisLabel: {
            show: true,
            interval: "auto",
            formatter: "{value}%",
            textStyle: {
              color: "#fff",
              fontSize: 12,
            },
          },
          nameTextStyle: {
            color: "#fff",
            fontSize: 12,
            lineHeight: 40,
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "#E9E9E9",
            },
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
      ],
      series: [
        {
          type: "line",
          smooth: true,
          // showSymbol: false,
          symbolSize: 8,
          zlevel: 3,
          lineStyle: {
            normal: {
              color: color[1],
              shadowBlur: 3,
              shadowColor: hexToRgba(color[1], 0.5),
              shadowOffsetY: 8,
            },
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: hexToRgba(color[1], 0.3),
                  },
                  {
                    offset: 1,
                    color: hexToRgba(color[1], 0.1),
                  },
                ],
                false
              ),
              shadowColor: hexToRgba(color[1], 0.1),
              shadowBlur: 10,
            },
          },
          markPoint: {
            data: [
              {
                type: "max",
                name: "最大值",
              },
              {
                type: "min",
                name: "最小值",
              },
            ],
          },
          data: percent,
        },
      ],
    };
    myChart.setOption(option);
  }
}

//高峰期小时最小发车间隔
// departureIntervalChart();
function departureIntervalChart() {
  // var myChart = echarts.init(
  //   document.getElementById("departureInterval_chart")
  // );
  let departureIntervaleC = document.getElementsByClassName(
    "departureInterval_chart"
  );
  for (var i = 0; i < departureIntervaleC.length; i++) {
    let myChart = echarts.init(departureIntervaleC[i]);
    option = {
      // backgroundColor: "#031245",
      textStyle: {
        color: "#c0c3cd",
        fontSize: 14,
      },
      toolbox: {
        show: false,
        feature: {
          saveAsImage: {
            backgroundColor: "#031245",
          },
          restore: {},
        },
        iconStyle: {
          borderColor: "#c0c3cd",
        },
      },
      legend: {
        top: 10,
        itemWidth: 8,
        itemHeight: 8,
        icon: "circle",
        left: "center",
        padding: 0,
        textStyle: {
          color: "#c0c3cd",
          fontSize: 14,
          padding: [2, 0, 0, 0],
        },
      },
      color: [
        "#63caff",
        "#49beff",
        "#03387a",
        "#03387a",
        "#03387a",
        "#6c93ee",
        "#a9abff",
        "#f7a23f",
        "#27bae7",
        "#ff6d9d",
        "#cb79ff",
        "#f95b5a",
        "#ccaf27",
        "#38b99c",
        "#93d0ff",
        "#bd74e0",
        "#fd77da",
        "#dea700",
      ],
      grid: {
        containLabel: true,
        left: "2%",
        right: "5%",
        bottom: "0%",
        top: "10%",
      },
      xAxis: {
        nameTextStyle: {
          color: "#c0c3cd",
          padding: [0, 0, -10, 0],
          fontSize: 10,
        },
        axisLabel: {
          color: "#fff",
          fontSize: 10,
          interval: 0,
          rotate: 40,
        },
        axisTick: {
          lineStyle: {
            color: "#384267",
            width: 1,
          },
          show: true,
        },
        splitLine: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            color: "#384267",
            width: 1,
            type: "dashed",
          },
          show: true,
        },
        data: lnNm,
        type: "category",
      },
      yAxis: {
        nameTextStyle: {
          color: "#c0c3cd",
          padding: [0, 0, -10, 0],
          fontSize: 14,
        },
        axisLabel: {
          color: "#c0c3cd",
          fontSize: 14,
        },
        axisTick: {
          lineStyle: {
            color: "#384267",
            width: 1,
          },
          show: true,
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "#384267",
            type: "dashed",
          },
        },
        axisLine: {
          lineStyle: {
            color: "#384267",
            width: 1,
            type: "dashed",
          },
          show: true,
        },
        name: "",
      },
      series: [
        {
          data: lnHrMinDptrIntvl,
          type: "bar",
          barMaxWidth: "auto",
          barWidth: "80%",
          itemStyle: {
            color: {
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              type: "linear",
              global: false,
              colorStops: [
                {
                  offset: 0,
                  color: "#0b9eff",
                },
                {
                  offset: 1,
                  color: "#63caff",
                },
              ],
            },
          },
          label: {
            show: true,
            position: "top",
            distance: 10,
            color: "#fff",
            fontSize: 10,
          },
        },
        {
          data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
          type: "pictorialBar",
          barMaxWidth: "80%",
          symbol: "diamond",
          symbolOffset: [0, "50%"],
          symbolSize: ["100%", "50%"],
        },
        {
          data: lnHrMinDptrIntvl,
          type: "pictorialBar",
          barMaxWidth: "80%",
          symbolPosition: "end",
          symbol: "diamond",
          symbolOffset: [0, "-50%"],
          symbolSize: ["100%", "5%"],
          zlevel: 2,
        },
        {
          data: [
            Math.max(lnHrMinDptrIntvl),
            Math.max(lnHrMinDptrIntvl),
            Math.max(lnHrMinDptrIntvl),
            Math.max(lnHrMinDptrIntvl),
            Math.max(lnHrMinDptrIntvl),
            Math.max(lnHrMinDptrIntvl),
            Math.max(lnHrMinDptrIntvl),
            Math.max(lnHrMinDptrIntvl),
            Math.max(lnHrMinDptrIntvl),
            Math.max(lnHrMinDptrIntvl),
            Math.max(lnHrMinDptrIntvl),
            Math.max(lnHrMinDptrIntvl),
            Math.max(lnHrMinDptrIntvl),
            Math.max(lnHrMinDptrIntvl),
            Math.max(lnHrMinDptrIntvl),
          ],
          type: "bar",
          barMaxWidth: "auto",
          barWidth: "80%",
          barGap: "-100%",
          zlevel: -1,
        },
        {
          data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
          type: "pictorialBar",
          barMaxWidth: "80%",
          symbol: "diamond",
          symbolOffset: [0, "50%"],
          symbolSize: ["100%", "5%"],
          zlevel: -2,
        },
        {
          data: [
            Math.max(lnHrMinDptrIntvl),
            Math.max(lnHrMinDptrIntvl),
            Math.max(lnHrMinDptrIntvl),
            Math.max(lnHrMinDptrIntvl),
            Math.max(lnHrMinDptrIntvl),
            Math.max(lnHrMinDptrIntvl),
            Math.max(lnHrMinDptrIntvl),
            Math.max(lnHrMinDptrIntvl),
            Math.max(lnHrMinDptrIntvl),
            Math.max(lnHrMinDptrIntvl),
            Math.max(lnHrMinDptrIntvl),
            Math.max(lnHrMinDptrIntvl),
            Math.max(lnHrMinDptrIntvl),
            Math.max(lnHrMinDptrIntvl),
            Math.max(lnHrMinDptrIntvl),
          ],
          type: "pictorialBar",
          barMaxWidth: "80%",
          symbolPosition: "end",
          symbol: "diamond",
          symbolOffset: [0, "-50%"],
          symbolSize: ["100%", "5%"],
          zlevel: -1,
        },
      ],
      tooltip: {
        trigger: "axis",
        show: false,
      },
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  }
}

// 日均客运量
passengerVolumeChart();
function passengerVolumeChart() {
  var myChart = echarts.init(document.getElementById("passengerVolume_chart"));
  var years = ["9-1", "9-2", "9-3"];
  var jdData = [
    [
      "1号线",
      "2号线",
      "3号线",
      "4号线",
      "5号线",
      "6号线",
      "7号线",
      "8号线",
      "9号线",
      "10号线",
      "11号线",
      "12号线",
      "13号线",
      "16号线",
      "17号线",
    ],
    [
      "1号线",
      "2号线",
      "3号线",
      "4号线",
      "5号线",
      "6号线",
      "7号线",
      "8号线",
      "9号线",
      "10号线",
      "11号线",
      "12号线",
      "13号线",
      "16号线",
      "17号线",
    ],
    [
      "1号线",
      "2号线",
      "3号线",
      "4号线",
      "5号线",
      "6号线",
      "7号线",
      "8号线",
      "9号线",
      "10号线",
      "11号线",
      "12号线",
      "13号线",
      "16号线",
      "17号线",
    ],
  ];
  var data = [
    [
      76.52,
      93.42,
      21.99,
      43.96,
      12.22,
      24.23,
      43.66,
      62.31,
      57.38,
      56.52,
      55.74,
      35.88,
      34.03,
      18.15,
      12.07,
    ],
    [
      76.52,
      93.42,
      21.99,
      43.96,
      12.22,
      24.23,
      43.66,
      62.31,
      57.38,
      56.52,
      55.74,
      35.88,
      34.03,
      18.15,
      12.07,
    ],
    [
      76.52,
      93.42,
      21.99,
      43.96,
      12.22,
      24.23,
      43.66,
      62.31,
      57.38,
      56.52,
      55.74,
      35.88,
      34.03,
      18.15,
      // 12.07,
    ],
  ];

  option = {
    baseOption: {
      // backgroundColor: "#2c343c", //背景颜色
      timeline: {
        data: years,
        axisType: "category",
        autoPlay: true,
        playInterval: 1500, //播放速度
        left: "5%",
        right: "5%",
        bottom: "0%",
        width: "90%",
        //  height: null,
        label: {
          normal: {
            textStyle: {
              color: "#fff",
            },
          },
          emphasis: {
            textStyle: {
              color: "#fff",
            },
          },
        },
        symbolSize: 10,
        lineStyle: {
          color: "#red",
        },
        checkpointStyle: {
          borderColor: "#red",
          borderWidth: 2,
        },
        controlStyle: {
          showNextBtn: true,
          showPrevBtn: true,
          normal: {
            color: "#ff8800",
            borderColor: "#ff8800",
          },
          emphasis: {
            color: "red",
            borderColor: "red",
          },
        },
      },
      title: {
        text: "",
        right: "2%",
        bottom: "20%",
        textStyle: {
          fontSize: 20,
          color: "black", //标题字体颜色
        },
      },
      tooltip: {
        trigger: "axis",
      },
      calculable: true,
      grid: {
        left: "12%",
        right: "3%",
        bottom: "15%",
        top: "5%",
        containLabel: true,
      },
      label: {
        normal: {
          textStyle: {
            color: "red",
          },
        },
      },
      yAxis: [
        {
          nameGap: 50,
          offset: "37",
          type: "category",
          interval: 10,
          //inverse: ture,//图表倒叙或者正序排版
          data: "",
          nameTextStyle: {
            color: "red",
          },

          axisLabel: {
            //rotate:45,
            show: false,
            textStyle: {
              fontSize: 12,

              color: function (params, Index) {
                // 标签国家字体颜色

                //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);//随机生成颜色

                var colorarrays = [
                  "#6bc0fb",
                  "#7fec9d",
                  "#fedd8b",
                  "#ffa597",
                  "#84e4dd",
                  "#749f83",
                  "#ca8622",
                  "#bda29a",
                  "#a8d8ea",
                  "#aa96da",
                  "#fcbad3",
                  "#ffffd2",
                  "#f38181",
                  "#fce38a",
                  "#eaffd0",
                  "#95e1d3",
                ];

                //console.log("111", Index, colorarrays[Index],params); //打印序列

                return colorarrays[jdData[0].indexOf(params)];
              },
            }, //rotate:45,
            interval: 10,
          },
          axisLine: {
            lineStyle: {
              color: "balck", //Y轴颜色
            },
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: "balck",
            },
          },
        },
      ],
      xAxis: [
        {
          type: "value",
          name: "",

          splitNumber: 8, //轴线个数
          nameTextStyle: {
            color: "balck",
          },
          axisLine: {
            lineStyle: {
              color: "#ffa597", //X轴颜色
            },
          },
          axisLabel: {
            formatter: "{value} ",
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#fedd8b",
            },
          },
        },
      ],
      series: [
        {
          name: "",
          type: "bar",
          markLine: {
            label: {
              normal: {
                show: false,
              },
            },
            lineStyle: {
              normal: {
                color: "red",
                width: 3,
              },
            },
          },
          label: {
            normal: {
              show: true,
              position: "right", //数值显示在右侧
              formatter: "{c}",
            },
          },
          itemStyle: {
            normal: {
              color: function (params) {
                // build a color map as your need.
                //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);//随机生成颜色
                var colorList = [
                  "#6bc0fb",
                  "#7fec9d",
                  "#fedd8b",
                  "#ffa597",
                  "#84e4dd",
                  "#749f83",
                  "#ca8622",
                  "#bda29a",
                  "#a8d8ea",
                  "#aa96da",
                  "#fcbad3",
                  "#ffffd2",
                  "#f38181",
                  "#fce38a",
                  "#eaffd0",
                  "#95e1d3",
                ];
                return colorList[jdData[0].indexOf(params.name)];
              },
            },
          },
        },

        {
          name: "",
          type: "bar",
          markLine: {
            label: {
              normal: {
                show: false,
              },
            },
            lineStyle: {
              normal: {
                color: "red",
                width: 3,
              },
            },
          },
          barWidth: "50%",
          barGap: "-100%",
          label: {
            normal: {
              show: true,
              fontSize: 12, //标签国家字体大小
              position: "left", //数值显示在右侧
              formatter: function (p) {
                return p.name;
              },
            },
          },
          itemStyle: {
            normal: {
              color: function (params) {
                // build a color map as your need.
                //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);//随机生成颜色
                var colorList = [
                  "#6bc0fb",
                  "#7fec9d",
                  "#fedd8b",
                  "#ffa597",
                  "#84e4dd",
                  "#749f83",
                  "#ca8622",
                  "#bda29a",
                  "#a8d8ea",
                  "#aa96da",
                  "#fcbad3",
                  "#ffffd2",
                  "#f38181",
                  "#fce38a",
                  "#eaffd0",
                  "#95e1d3",
                ];
                // return colorList[params.dataIndex]

                // console.log("111", params.name); //打印序列
                return colorList[jdData[0].indexOf(params.name)];
              },
            },
          },
        },
      ],

      animationEasingUpdate: "quinticInOut",
      animationDurationUpdate: 1500, //动画效果
    },

    options: [],
  };
  for (var n = 0; n < years.length; n++) {
    var res = [];
    //alert(jdData.length);
    for (j = 0; j < data[n].length; j++) {
      res.push({
        name: jdData[n][j],
        value: data[n][j],
      });
    }

    res
      .sort(function (a, b) {
        return b.value - a.value;
      })
      .slice(0, 6);

    res.sort(function (a, b) {
      return a.value - b.value;
    });

    var res1 = [];
    var res2 = [];
    //console.log(res);
    for (t = 0; t < res.length; t++) {
      res1[t] = res[t].name;
      res2[t] = res[t].value;
    }
    option.options.push({
      title: {
        text: years[n] + "日",
      },
      yAxis: {
        data: res1,
      },
      series: [
        {
          data: res2,
        },
        {
          data: res2,
        },
      ],
    });
  }
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}

// 列车运行可靠度
reliabilityChart();
function reliabilityChart() {
  var myChart = echarts.init(document.getElementById("reliability_chart"));
  let img1 =
    "";
  let img2 =
    "";
  let img3 =
    "";
  let barData = [
    {
      name: "1号线",
      num: 7.78,
    },
    {
      name: "2号线",
      num: 19.85,
    },
    {
      name: "3号线",
      num: 6.15,
    },
    {
      name: "4号线",
      num: 6.34,
    },
    {
      name: "5号线",
      num: 5.32,
    },
    {
      name: "6号线",
      num: 5.61,
    },
    {
      name: "7号线",
      num: 9.34,
    },
    {
      name: "8号线",
      num: 10.95,
    },
    {
      name: "9号线",
      num: 15.41,
    },
    {
      name: "10号线",
      num: 11.79,
    },
    {
      name: "11号线",
      num: 16.91,
    },
    {
      name: "12号线",
      num: 7.75,
    },
    {
      name: "13号线",
      num: 8.79,
    },
    {
      name: "16号线",
      num: 9.54,
    },
    {
      name: "17号线",
      num: 6.78,
    },
  ];
  let bar = (data, dom) => {
    let color1 = {
      type: "linear",
      colorStops: [
        {
          offset: 0,
          color: "rgb(27,124,177)",
        },
        {
          offset: 0.2,
          color: "rgb(23,196,230)",
        },
        {
          offset: 0.5,
          color: "rgb(6,120,221)",
        },
        {
          offset: 0.8,
          color: "rgb(27,196,227)",
        },
        {
          offset: 1,
          color: "rgb(43,113,164)",
        },
      ],
    };
    let color2 = {
      type: "radial",
      colorStops: [
        {
          offset: 0,
          color: "rgba(13,47,85,.8)",
        },
        {
          offset: 0.5,
          color: "rgba(33,74,118,.8)",
        },
        {
          offset: 1,
          color: "rgba(33,74,118,.8)",
        },
      ],
    };
    let color3 = {
      type: "radial",
      colorStops: [
        {
          offset: 0,
          color: "rgba(17,47,75,.7)",
        },
        {
          offset: 1,
          color: "rgba(51,205,207,.7)",
        },
      ],
    };
    let xLabelData = [];
    let bgData = [];
    let innerData = [];
    data.forEach((item) => {
      xLabelData.push(item.name);
      innerData.push(item.num);
      bgData.push(20);
    });
    let innerTopData = (_data) => {
      let arr = [];
      let height = dom.clientHeight;
      _data.forEach((item) => {
        if (item * height > 20) {
          arr.push({
            value: item,
          });
        } else {
          arr.push({
            value: item,
            symbolOffset: [0, -25 + item * height],
          });
        }
      });
      return arr;
    };
    let innerShadowData = (_data) => {
      let arr = [];
      let height = dom.clientHeight;
      _data.forEach((item) => {
        if (item < 40) {
          if (item * height > 20) {
            arr.push({
              value: item,
            });
          } else {
            arr.push({
              value: item,
              symbolOffset: [0, -47.5 + item * height],
            });
          }
        } else {
          arr.push({
            value: "",
          });
        }
      });
      return arr;
    };
    let option = {
      grid: {
        top: "15%",
        left: "10%",
        bottom: "12%",
        right: "10%",
        // containLabel: true,
      },
      xAxis: {
        data: xLabelData,
        axisTick: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            color: "rgb(2,185,208)",
          },
        },
        axisLabel: {
          rotate: 45,
          interval: 0,
          textStyle: {
            color: "rgb(2,219,227)",
            fontSize: 10,
          },
          margin: 5,
        },
      },
      yAxis: {
        axisTick: {
          show: true,
        },
        splitLine: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            color: "rgb(2,185,208)",
          },
        },
        axisLabel: {
          textStyle: {
            color: "rgb(2,185,208)",
          },
          formatter: (value, index) => {
            if (value === 0 || value === 15 || value === 20) {
              return value;
            } else {
              return "";
            }
          },
        },
        splitNumber: 10,
      },
      series: [
        {
          //空柱子label
          barGap: "100%",
          type: "bar",
          itemStyle: {
            normal: {
              color: "transparent",
            },
          },
          label: {
            show: true,
            position: "insideTop",
            distance: -30,
            rich: {
              a: {
                color: "rgb(2,219,227)",
                fontSize: 12,
                align: "left",
                padding: [0, 0, 0, 0],
                width: "1%",
                height: 16,
                lineHeight: 16,
              },
            },
            formatter: (params) => {
              return "{a|" + params.value + "}";
            },
          },
          z: 5,
          data: innerData,
        },
        {
          //蓝色柱子
          barGap: "100%",
          type: "pictorialBar",
          itemStyle: {
            normal: {
              color: color1,
            },
          },
          symbol: "rect",
          symbolClip: true,
          symbolSize: [15, "100%"],
          symbolOffset: [0, -20],
          symbolPosition: "start",
          z: 5,
          animation: false,
          data: innerData,
        },
        {
          //蓝色柱子顶部阴影椭圆
          type: "pictorialBar",
          itemStyle: {
            normal: {
              color: color3,
            },
          },
          symbolSize: [15, 10],
          symbolOffset: [0, -27.5],
          symbolPosition: "end",
          z: 2,
          animation: false,
          data: innerShadowData(innerData),
        },
        {
          //蓝色柱子顶部椭圆
          barGap: "100%",
          type: "pictorialBar",
          itemStyle: {
            normal: {
              color: "rgb(51,255,207)",
            },
          },
          symbolSize: [15, 10],
          symbolOffset: [0, -5],
          symbolPosition: "end",
          z: 6,
          animation: false,
          data: innerTopData(innerData),
        },
        {
          //蓝色柱子底部椭圆
          type: "pictorialBar",
          itemStyle: {
            normal: {
              color: color1,
            },
          },
          symbolSize: [15, 10],
          symbolOffset: [0, -15],
          symbolPosition: "start",
          z: 5,
          animation: false,
          data: innerData,
        },
        {
          //底部投影
          type: "pictorialBar",
          symbol: "image://" + img2,
          symbolSize: [15, 20],
          symbolOffset: [0, -8],
          symbolPosition: "start",
          z: 2,
          animation: false,
          data: bgData,
        },
      ],
    };
    return option;
  };
  option = bar(barData, document.getElementById("reliability_chart"));
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}
// 车辆上线率
vehicleOnlineRateChart();
function vehicleOnlineRateChart() {
  var myChart = echarts.init(document.getElementById("vehicleOnlineRateChart"));
  var data = {
    value: 76,
    name: "车辆上线率",
  };
  option = {
    title: {
      text: "{num|" + data.value + "%}",
      subtext: "\n" + data.name,
      x: "49%",
      y: "49%",
      textAlign: "center",
      textStyle: {
        rich: {
          num: {
            fontWeight: "500",
            color: "#00E4FF",
            fontFamily: "微软雅黑",
            fontSize: 45,
          },
        },
      },
      subtextStyle: {
        lineHeight: 30,
        fontSize: 30,
        color: "#fff",
      },
    },
    data: [
      {
        name: data.name,
      },
    ],
    series: [
      {
        // 主圆环
        name: data.name,
        type: "pie",
        radius: ["65%", "80%"],
        center: ["50%", "60%"],
        startAngle: 180,
        endAngle: 0,

        color: [
          {
            type: "linear",
            x: 1,
            y: 0,
            x2: 0,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: "rgba(45,246,242,.1)", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(45,246,242,1)", // 100% 处的颜色
              },
            ],
          },
          "transparent",
        ],
        hoverAnimation: true,
        legendHoverLink: false,
        z: 10,
        labelLine: {
          normal: {
            show: false,
          },
        },
        data: [
          {
            value: (50 * data.value) / 100,
          },
          {
            value: 100 - (50 * data.value) / 100,
          },
        ],
      },
      {
        // 中间圈
        name: "",
        z: 5,
        type: "pie",
        cursor: "default",
        radius: ["95%", "95%"],
        center: ["50%", "60%"],
        startAngle: 180,
        hoverAnimation: false,
        legendHoverLink: false,
        labelLine: {
          normal: {
            show: false,
          },
        },

        data: [
          {
            value: 50,
            itemStyle: {
              borderColor: "#2DF6F3",
              borderType: "dashed",
              borderWidth: 2,
            },
          },
          {
            value: 50,
            itemStyle: {
              color: "transparent",
            },
          },
        ],
      },
    ],
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}

//施工规范率
// constructionStandardChart();
function constructionStandardChart() {
  // var myChart = echarts.init(
  //   document.getElementById("constructionStandardChart")
  // );
  let constructionStandardC = document.getElementsByClassName(
    "constructionStandard_chart"
  );
  for (var i = 0; i < constructionStandardC.length; i++) {
    let myChart = echarts.init(constructionStandardC[i]);
    // 颜色设置
    var color = {
      linearYtoG: {
        type: "linear",
        x: 0,
        y: 0,
        x2: 1,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: "#f5b44d",
          },
          {
            offset: 1,
            color: "#28f8de",
          },
        ],
      },
      linearGtoB: {
        type: "linear",
        x: 0,
        y: 0,
        x2: 1,
        y2: 0,
        colorStops: [
          {
            offset: 0,
            color: "#43dfa2",
          },
          {
            offset: 1,
            color: "#28f8de",
          },
        ],
      },
      linearBtoG: {
        type: "linear",
        x: 0,
        y: 0,
        x2: 1,
        y2: 0,
        colorStops: [
          {
            offset: 0,
            color: "#1c98e8",
          },
          {
            offset: 1,
            color: "#28f8de",
          },
        ],
      },
      areaBtoG: {
        type: "linear",
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: "rgba(35,184,210,.2)",
          },
          {
            offset: 1,
            color: "rgba(35,184,210,0)",
          },
        ],
      },
    };
    var colors = ["#2E9AFE", "#FF8000", "#A4A4A4", "#F7D358"],
      option = {
        color: colors,
        title: {
          text: thatDaeM(stdRateData.indiviData.mth) + "月施工规范率",
          right: "15%",
          bottom: "2%",
          textStyle: {
            color: "#fff",
            fontSize: 14,
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: 10,
          left: 10,
          data: stdRateData.majorSet,
          textStyle: {
            color: "#fff",
          },
        },
        radar: {
          center: ["70%", "50%"],
          radius: "18%",
          name: {
            color: "#fff",
          },
          splitNumber: 8,
          axisLine: {
            lineStyle: {
              color: color.linearYtoG,
              opacity: 0.6,
            },
          },
          indicator: [
            {
              name:
                stdRateData.majorSet[0] +
                "\n" +
                (stdRateData.indiviData.dataList[0] * 100).toFixed(2) +
                "%",
              max: 200,
            },
            {
              name:
                stdRateData.majorSet[1] +
                "\n" +
                (stdRateData.indiviData.dataList[1] * 100).toFixed(2) +
                "%",
              max: 200,
            },
            {
              name:
                stdRateData.majorSet[2] +
                "\n" +
                (stdRateData.indiviData.dataList[2] * 100).toFixed(2) +
                "%",
              max: 200,
            },
            {
              name:
                stdRateData.majorSet[3] +
                "\n" +
                (stdRateData.indiviData.dataList[3] * 100).toFixed(2) +
                "%",
              max: 200,
            },
          ],
        },
        grid: {
          left: "17%",
          right: "62%",
          bottom: 40,
          top: "30%",
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          axisLabel: {
            show: true,
            interval: 0,
            rotate: 45,
            textStyle: {
              color: "#ffffff", //X轴文字颜色
              fontSize: 10,
            },
          },
          data: stdRateData.mthSet.map((v) => thatDaeM(v) + "月"),
        },
        yAxis: {
          type: "value",
          scale: true,
          axisLabel: {
            formatter: "{value}%",
            color: "#ffffff",
            textStyle: {
              fontSize: 12,
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#ccc",
            },
          },
        },
        series: [
          {
            name: thatDaeM(stdRateData.indiviData.mth) + "月施工规范率",
            type: "radar",
            symbolSize: 0,
            data: [
              {
                value: stdRateData.indiviData.dataList.map((v) =>
                  (v * 100).toFixed(2)
                ),
                itemStyle: {
                  normal: {
                    color: "#f8d351",
                  },
                },
                lineStyle: {
                  normal: {
                    opacity: 0,
                  },
                },
                areaStyle: {
                  normal: {
                    color: "#f8d351",
                    shadowBlur: 25,
                    shadowColor: "rgba(248,211,81,.3)",
                    shadowOffsetX: 0,
                    shadowOffsetY: -10,
                    opacity: 1,
                  },
                },
              },
            ],
          },
          {
            name: stdRateData.majorSet[0],
            type: "line",
            barWidth: "50%",
            data: stdRateData.statn_data.map((v) => (v * 100).toFixed(2)),
            barWidth: "20px",
            lineStyle: {
              normal: {
                width: 4,
              },
            },
          },
          {
            name: stdRateData.majorSet[1],
            type: "line",
            barWidth: "50%",
            lineStyle: {
              normal: {
                width: 4,
              },
            },
            data: stdRateData.resv_data.map((v) => (v * 100).toFixed(2)),
          },
          {
            name: stdRateData.majorSet[2],
            type: "line",
            barWidth: "50%",
            lineStyle: {
              normal: {
                width: 4,
              },
            },
            data: stdRateData.statn_data.map((v) => (v * 100).toFixed(2)),
          },
          {
            name: stdRateData.majorSet[3],
            type: "line",
            barWidth: "50%",
            lineStyle: {
              normal: {
                width: 4,
              },
            },
            data: stdRateData.trk_data.map((v) => (v * 100).toFixed(2)),
          },
        ],
      };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  }
}

//车辆可用率
vehicleAvailabilityChart();
function vehicleAvailabilityChart() {
  var myChart = echarts.init(
    document.getElementById("vehicleAvailabilityChart")
  );
  var option = {
    title: {
      text: "",
      textStyle: {
        fontWeight: "normal",
        fontSize: 25,
        color: "rgb(97, 142, 205)",
      },
    },
    series: [
      {
        type: "liquidFill",
        radius: "75%",
        center: ["50%", "50%"],
        data: [0.5, 0.5, 0.5], // data个数代表波浪数
        backgroundStyle: {
          borderWidth: 1,
          color: "rgb(255,0,255,0.1)",
        },
        label: {
          normal: {
            formatter: (0.5 * 100).toFixed(2) + "%",
            textStyle: {
              fontSize: 30,
            },
          },
        },
        outline: {
          show: false,
        },
      },
      {
        type: "pie",
        center: ["50%", "50%"],
        radius: ["80%", "83%"],
        hoverAnimation: false,
        data: [
          {
            name: "",
            value: 500,
            labelLine: {
              show: false,
            },
            itemStyle: {
              color: "#5886f0",
            },
            emphasis: {
              labelLine: {
                show: false,
              },
              itemStyle: {
                color: "#5886f0",
              },
            },
          },
          {
            //画中间的图标
            name: "",
            value: 4,
            labelLine: {
              show: false,
            },
            itemStyle: {
              color: "#ffffff",
              normal: {
                color: "#5886f0",
                borderColor: "#5886f0",
                borderWidth: 10,
                // borderRadius: '100%'
              },
            },
            label: {
              borderRadius: "100%",
            },
            emphasis: {
              labelLine: {
                show: false,
              },
              itemStyle: {
                color: "#5886f0",
              },
            },
          },
          {
            // 解决圆点过大后续部分显示明显的问题
            name: "",
            value: 4,
            labelLine: {
              show: false,
            },
            itemStyle: {
              color: "#5886f0",
            },
            emphasis: {
              labelLine: {
                show: false,
              },
              itemStyle: {
                color: "#5886f0",
              },
            },
          },
          {
            //画剩余的刻度圆环
            name: "",
            value: 88,
            itemStyle: {
              color: "#050038",
            },
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            emphasis: {
              labelLine: {
                show: false,
              },
              itemStyle: {
                color: "rgba(255,255,255,0)",
              },
            },
          },
        ],
      },
    ],
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}

//配属车辆数
allocatedVehiclesNumChart();
function allocatedVehiclesNumChart() {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(
    document.getElementById("allocatedVehiclesNumChart")
  );
  var salvProName = [
    "1号线",
    "2号线",
    "3号线",
    "4号线",
    "5号线",
    "6号线",
    "7号线",
    "8号线",
    "9号线",
    "10号线",
    "11号线",
    "12号线",
    "13号线",
    "16号线",
    "17号线",
  ];
  var salvProValue = [
    53,
    69,
    34,
    31,
    17,
    50,
    42,
    66,
    41,
    24,
    22,
    21,
    24,
    22,
    21,
  ];
  var salvProMax = []; //背景按最大值
  for (let i = 0; i < salvProValue.length; i++) {
    salvProMax.push(salvProValue[0]);
  }
  option = {
    grid: {
      left: "16%",
      right: "10%",
      bottom: "3%",
      top: "3%",
      // containLabel: true,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "none",
      },
      formatter: function (params) {
        return params[0].name + " : " + params[0].value;
      },
    },
    xAxis: {
      show: false,
      type: "value",
    },
    yAxis: [
      {
        type: "category",
        inverse: true,
        axisLabel: {
          show: true,
          interval: 0,
          textStyle: {
            color: "#fff",
          },
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        data: salvProName,
      },
      {
        type: "category",
        inverse: true,
        axisTick: "none",
        axisLine: "none",
        show: true,
        axisLabel: {
          textStyle: {
            color: "#ffffff",
            fontSize: "12",
          },
        },
        data: salvProValue,
      },
    ],
    series: [
      {
        name: "值",
        type: "bar",
        zlevel: 1,
        itemStyle: {
          normal: {
            barBorderRadius: 10,
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: "rgb(57,89,255,1)",
              },
              {
                offset: 1,
                color: "rgb(46,200,207,1)",
              },
            ]),
          },
        },
        barWidth: 10,
        data: salvProValue,
      },
      {
        name: "背景",
        type: "bar",
        barWidth: 10,
        barGap: "-100%",
        data: salvProMax,
        itemStyle: {
          normal: {
            color: "rgba(45,47,35,.5)",
            barBorderRadius: 10,
          },
        },
      },
    ],
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}
//土建工程完成率
civilEngineeringCompleChart();
function civilEngineeringCompleChart() {
  var myChart = echarts.init(
    document.getElementById("civilEngineeringCompleChart")
  );
  var option = {
    // backgroundColor: "#091C3D",
    tooltip: {
      //提示框组件
      trigger: "axis",
      formatter: "{b}<br />{a0}: {c0}%<br />{a1}: {c1}%",
      axisPointer: {
        type: "shadow",
        label: {
          backgroundColor: "#6a7985",
        },
      },
      textStyle: {
        color: "#fff",
        fontStyle: "normal",
        fontFamily: "微软雅黑",
        fontSize: 12,
      },
    },
    grid: {
      left: "2%",
      right: "5%",
      bottom: "0%",
      top: "18%",
      //	padding:'0 0 10 0',
      containLabel: true,
    },
    legend: {
      //图例组件，颜色和名字
      right: "5%",
      top: "5%",
      itemGap: 16,
      itemWidth: 18,
      itemHeight: 10,
      data: [
        {
          name: "计划完成率",
          //icon:'image://../wwwroot/js/url2.png', //路径
        },
        {
          name: "实际完成率",
        },
      ],
      textStyle: {
        color: "#a8aab0",
        fontStyle: "normal",
        fontFamily: "微软雅黑",
        fontSize: 12,
      },
    },
    xAxis: [
      {
        type: "category",
        //	boundaryGap: true,//坐标轴两边留白
        data: ["10号线二期", "14号线", "15号线", "18号线"],
        axisLabel: {
          //坐标轴刻度标签的相关设置。
          //		interval: 0,//设置为 1，表示『隔一个标签显示一个标签』
          //	margin:15,
          textStyle: {
            color: "#fff",
            fontStyle: "normal",
            fontFamily: "微软雅黑",
            fontSize: 12,
          },
          rotate: 50,
        },
        axisTick: {
          //坐标轴刻度相关设置。
          show: false,
        },
        axisLine: {
          //坐标轴轴线相关设置
          lineStyle: {
            color: "#fff",
            opacity: 0.2,
          },
        },
        splitLine: {
          //坐标轴在 grid 区域中的分隔线。
          show: false,
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        splitNumber: 5,
        axisLabel: {
          formatter: "{value}%",
          textStyle: {
            color: "#fff",
            fontStyle: "normal",
            fontFamily: "微软雅黑",
            fontSize: 12,
          },
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: ["#fff"],
            opacity: 0.06,
          },
        },
      },
    ],
    series: [
      {
        name: "计划完成率",
        type: "bar",
        data: [100, 72.23, 100, 75.84],
        barWidth: 20,
        barGap: "10%", //柱间距离
        // label: {//图形上的文本标签
        //     normal: {
        //       show: true,
        //       position: 'top',
        //       textStyle: {
        //           color: '#a8aab0',
        //           fontStyle: 'normal',
        //           fontFamily: '微软雅黑',
        //           fontSize: 12,
        //       },
        //     },
        // },
        itemStyle: {
          normal: {
            show: true,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#5768EF",
              },
              {
                offset: 1,
                color: "#5768EF",
              },
            ]),
            barBorderRadius: 50,
            borderWidth: 0,
          },
        },
      },
      {
        name: "实际完成率",
        type: "bar",
        data: [100, 73.73, 100, 79.4],
        barWidth: 20,
        barGap: "10%", //柱间距离
        // label: {//图形上的文本标签
        //     normal: {
        //       show: true,
        //       position: 'top',
        //       textStyle: {
        //           color: '#a8aab0',
        //           fontStyle: 'normal',
        //           fontFamily: '微软雅黑',
        //           fontSize: 12,
        //       },
        //     },
        // },
        itemStyle: {
          normal: {
            show: true,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#69CBF2",
              },
              {
                offset: 1,
                color: "#69CBF2",
              },
            ]),
            barBorderRadius: 50,
            borderWidth: 0,
          },
        },
      },
    ],
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}

//机电安装调试完成率
installationDebugChart();
function installationDebugChart() {
  var myChart = echarts.init(document.getElementById("installationDebugChart"));
  let angle = 0; //角度，用来做简单的动画效果的
  let value = 55.33;
  var fourPieData = [
    {
      name: "10号线二期",
      value: 90.28,
    },
    {
      name: "14号线",
      value: 3.74,
    },
    {
      name: "15号线",
      value: 42.23,
    },
    {
      name: "18号线",
      value: 0.33,
    },
  ];
  var titleArr = [],
    seriesArr = [];
  fourPieData.forEach(function (item, index) {
    titleArr.push({
      // text: "{a|" + item.value + "}{c|%}",
      // left: index < 2 ? index * 50 + 20 + "%" : index * 50 - 82 + "%",
      // top: index < 2 ? "17%" : "67%",
      // textStyle: {
      //   rich: {
      //     a: {
      //       fontSize: 20,
      //       color: "#29EEF3",
      //     },

      //     c: {
      //       fontSize: 20,
      //       color: "#29EEF3",
      //     },
      //   },
      // },
      text: item.name,
      left: index < 2 ? index * 50 + 25 + "%" : index * 50 - 75 + "%",
      top: index < 2 ? "40%" : "90%",
      textAlign: "center",
      textStyle: {
        fontWeight: "normal",
        fontSize: "12",
        color: "#fff",
        textAlign: "center",
      },
    });
    seriesArr.push({
      name: item.name,
      type: "pie",
      radius: ["35%", "28%"],
      silent: true,
      clockwise: true,
      startAngle: 90,
      z: 0,
      zlevel: 0,
      label: {
        normal: {
          position: "center",
        },
      },
      center: [
        index < 2 ? index * 50 + 25 + "%" : index * 50 - 75 + "%",
        index < 2 ? "22%" : "72%",
      ],
      data: [
        {
          value: item.value,
          label: {
            normal: {
              formatter: function (params) {
                return params.value + "%";
              },
              position: "center",
              show: true,
              textStyle: {
                fontSize: "14",
                fontWeight: "bold",
                color: "#fff", //跟随其他颜色
              },
            },
          },
          itemStyle: {
            normal: {
              color: {
                // 完成的圆环的颜色
                colorStops: [
                  {
                    offset: 0,
                    color: "#4FADFD", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#28E8FA", // 100% 处的颜色
                  },
                ],
              },
            },
          },
        },
        {
          value: 100 - item.value,
          name: "",
          label: {
            normal: {
              show: false,
            },
          },
          itemStyle: {
            normal: {
              color: "#173164",
            },
          },
        },
      ],
    });
  });
  var option = {
    title: titleArr,
    series: seriesArr,
    // backgroundColor: "#061740",
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}
//土木工程合格率
qualifiedCivilEngineChart();
function qualifiedCivilEngineChart() {
  var myChart = echarts.init(
    document.getElementById("qualifiedCivilEngineChart")
  );
  var colorSet = {
    color: "#468EFD",
  };
  var fourPieData = [
    {
      name: "10号线二期",
      value: 100,
    },
    {
      name: "14号线",
      value: 100,
    },
    {
      name: "15号线",
      value: 100,
    },
    {
      name: "18号线",
      value: 100,
    },
  ];

  var titleArr = [],
    seriesArr = [];
  fourPieData.forEach(function (item, index) {
    titleArr.push({
      show: true,
      text: item.name,
      left: index < 2 ? index * 50 + 25 + "%" : index * 50 - 75 + "%",
      top: index < 2 ? "43%" : "90%",
      textAlign: "center",
      textStyle: {
        fontWeight: "normal",
        fontSize: "12",
        color: "#fff",
        textAlign: "center",
      },
    });
    seriesArr.push(
      {
        name: "内部进度条",
        type: "gauge",
        // // center: ['20%', '50%'],
        radius: "25%",
        splitNumber: 10,
        center: [
          index < 2 ? index * 50 + 25 + "%" : index * 50 - 75 + "%",
          index < 2 ? "30%" : "75%",
        ],
        axisLine: {
          lineStyle: {
            color: [
              [item.value / 100, colorSet.color],
              [1, "#111F42"],
            ],
            width: 5,
          },
        },
        axisLabel: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },

        pointer: {
          show: false,
        },
      },
      {
        name: "外部刻度",
        type: "gauge",
        // center: ["20%", "50%"],
        radius: "30%",
        center: [
          index < 2 ? index * 50 + 25 + "%" : index * 50 - 75 + "%",
          index < 2 ? "30%" : "75%",
        ],
        min: 0, //最小刻度
        max: 100, //最大刻度
        splitNumber: 10, //刻度数量
        startAngle: 225,
        endAngle: -45,
        axisLine: {
          show: true,
          lineStyle: {
            width: 2,
            color: [[1, "rgba(0,0,0,0)"]],
          },
        },
        //仪表盘轴线
        axisLabel: {
          fontSize: 10,
          show: true,
          color: "#4d5bd1",
          distance: 25,
          formatter: function (v) {
            switch (v + "") {
              case "0":
                return "0";
              case "10":
                return "10";
              case "20":
                return "20";
              case "30":
                return "30";
              case "40":
                return "40";
              case "50":
                return "50";
              case "60":
                return "60";
              case "70":
                return "70";
              case "80":
                return "80";
              case "90":
                return "90";
              case "100":
                return "100";
            }
          },
        }, //刻度标签。
        axisTick: {
          show: true,
          splitNumber: 7,
          lineStyle: {
            color: colorSet.color, //用颜色渐变函数不起作用
            width: 2,
          },
          length: -8,
        }, //刻度样式
        splitLine: {
          show: true,
          length: -20,
          lineStyle: {
            color: colorSet.color, //用颜色渐变函数不起作用
          },
        }, //分隔线样式
        detail: {
          show: false,
        },
        pointer: {
          show: false,
        },
      },
      /*内部*/
      {
        type: "pie",
        radius: "15%",
        center: [
          index < 2 ? index * 50 + 25 + "%" : index * 50 - 75 + "%",
          index < 2 ? "30%" : "75%",
        ],
        z: 8,
        hoverAnimation: false,
        data: [
          {
            name: "污染程度",
            value: item.value,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: "#4FADFD",
                  },
                  {
                    offset: 1,
                    color: "#28E8FA",
                  },
                ]),
              },
            },
            label: {
              normal: {
                rich: {
                  a: {
                    color: "#468EFD",
                    align: "center",
                    fontSize: 16,
                    fontWeight: "bold",
                  },
                },
                formatter: function (params) {
                  return "{a|" + params.value + "}";
                },
                position: "center",
                show: true,
              },
            },
            labelLine: {
              show: false,
            },
          },
        ],
      }
    );
  });
  var option = {
    title: titleArr,
    series: seriesArr,
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}
